<template>
  <view class="container">

    <!-- 页面头部 -->
    <view class="header">
      <view class="title">
        <text v-if="isMpWeixinMobile">{{'绑定手机号'}}</text>
		<text v-else-if="loginMethod == 'account'">{{'手机号登录'}}</text>
		<text v-else-if="loginMethod == 'codeLogin'">{{'手机号登录'}}</text>
		<text v-else-if="loginMethod == 'codeRegister'">{{'手机号注册'}}</text>
      </view>
    </view>
	
	<!-- 微信手机号登录 --表单 --> 
	<mpMobileLogin v-if="isMpWeixinMobile" :partyData="partyData" @loginMethodChange="loginMethodChange"></mpMobileLogin>
    <!-- 手机号登录 -- 表单 -->
	<accountLogin v-else-if="loginMethod == 'account'" :partyData="partyData" @loginMethodChange="loginMethodChange"></accountLogin>
    <!-- 验证码登录 -- 表单 -->
    <codeLogin v-else-if="loginMethod == 'codeLogin'" @loginMethodChange="loginMethodChange"></codeLogin>
	<!-- 验证码注册 -- 表单 -->
	<codeRegister v-else-if="loginMethod == 'codeRegister'" @loginMethodChange="loginMethodChange"></codeRegister>
    <!-- 微信授权手机号一键登录 -->
    <!-- #ifdef MP-WEIXIN -->
    <!-- <MpWeixinMobile v-if="isMpWeixinMobile" :isParty="isParty" :partyData="partyData" /> -->
    <!-- #endif -->

  </view>
</template>

<script>
  import store from '@/store'
  import * as CaptchaApi from '@/api/captcha'
  import * as Verify from '@/utils/verify'
  import MpWeixinMobile from './mp-weixin-mobile'
  import accountLogin from './accountLogin.vue'
  import mpMobileLogin from './mpMobileLogin.vue'
  import codeLogin from './code-login.vue'
  import codeRegister from './code-register.vue'
  // 倒计时时长(秒)
  const times = 60

  // 表单验证场景
  const GET_CAPTCHA = 10
  const SUBMIT_LOGIN = 20

  export default {
    components: {
      MpWeixinMobile,
	  accountLogin,
	  mpMobileLogin,
	  codeLogin,
	  codeRegister
    },

    props: {
      // 是否存在第三方用户信息
      isParty: {
        type: Boolean,
        default: () => false
      },
      // 第三方用户信息数据
      partyData: {
        type: Object
      },
      // 是否显示微信小程序端 一键授权手机号
      isMpWeixinMobile: {
        type: Boolean,
        default: () => false
      },
    },

    data() {
      return {
        // 正在加载
        isLoading: false,
        // 按钮禁用
        disabled: false,
		loginMethod: 'account'
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    created() {
    },

    methods: {
	  loginMethodChange(value){
	  	this.loginMethod = value
	  }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    padding: 100rpx 60rpx;
    min-height: 100vh;
    background-color: #fff;
  }

  // 页面头部
  .header {
    margin-bottom: 60rpx;

    .title {
      color: #191919;
      font-size: 54rpx;
    }

    .sub-title {
      margin-top: 20rpx;
      color: #b3b3b3;
      font-size: 28rpx;
    }
  }

  // 输入框元素
  .form-item {
    display: flex;
    align-items: center;
    padding: 18rpx;
    border-bottom: 1rpx solid #f3f1f2;
    margin-bottom: 30rpx;
    height: 96rpx;

    &--input {
      font-size: 28rpx;
      letter-spacing: 1rpx;
      flex: 1;
      height: 100%;
    }

    &--parts {
      min-width: 100rpx;
    }

    // 图形验证码
    .captcha {
      height: 60rpx;

      .image {
        display: block;
        width: 192rpx;
        height: 100%;
      }
    }

    // 短信验证码
    .captcha-sms {
      font-size: 28rpx;
      line-height: 50rpx;
      padding-right: 20rpx;

      .activate {
        color: $main-bg;
      }

      .un-activate {
        color: #9e9e9e;
      }
    }
  }
  .form-item-code{
	  text-align: right;
	  color: $main-bg;
	  margin-top: 40rpx;
  }

  // 登录按钮
  .login-button {
    width: 100%;
    height: 86rpx;
    margin-top: 80rpx;
    background: linear-gradient(to right, $main-bg, $main-bg2);
    color: $main-text;
    border-radius: 80rpx;
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
    letter-spacing: 5rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    // 禁用按钮
    &.disabled {
      opacity: 0.6;
    }
  }
</style>